<template>
  <div class="risk-source-layout">
    <!-- 地图容器 -->
    <div id="map-container"></div>
    <div class="table-container">
      <div class="main">
        <vxe-table
          ref="xTable"
          height="99%"
          class="scrollbarStyle"
          align="center"
          show-overflow
          show-header-overflow
          :data="tableData"
          :column-config="{ resizable: true }"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column
            show-overflow
            :key="index"
            :title="item.title"
            :field="item.key"
            :width="item.width"
            v-for="(item, index) in columns"
          >
            <template #default="{ row }">
              <div>{{ row[item.key] }}</div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="pager-container">
        <vxe-pager
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              第<span>1</span>到<span
                >{{ Math.ceil(pager.total / pager.pageSize) || 1 }}页 </span
              >共<span>{{ pager.total }}</span
              >条记录
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
  </div>
</template>

<script>
import { getProInitGeo } from "@/utils";
import { getDangerousGisList } from "@/api/wisdom-beam/security-app.js";
export default {
  components: {},
  data() {
    return {
      mapInstance: null,
      marker: null,
      //默认经纬度
      defaultCenter: getProInitGeo(),
      columns: [
        {
          title: "过程（区域）",
          key: "position",
        },
        {
          title: "类型",
          key: "bindingState",
        },
        {
          title: "危险源名称",
          key: "changeName",
        },
      ],
      tableData: [],
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap();
    });
    this.getTableData();
  },
  methods: {
    //初始化地图服务
    initMap() {
      this.mapInstance = new AMap.Map("map-container", {
        zoom: 15,
        center: this.defaultCenter,
        viewMode: "3D",
      });
    },
    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },
    getTableData() {
      let { page, pageSize } = this.pager;
      let {
        conditions: { changeProcess = "", orgCode },
      } = this.$parent.$data;
      getDangerousGisList({
        zhgdDeptCode: orgCode?.key || "",
        page,
        pageSize,
        changeProcess,
        id: "",
      })
        .then((res) => {
          let { data } = res;
          this.tableData = data?.result?.rows || [];
          this.pager.total = data?.result?.total || 0;
          this.mapInstance && this.mapInstance.clearMap();
          this.drawMapLayer();
        })
        .catch((_) => {
          this.tableData = [];
          this.pager.total = 0;
        })
        .finally((_) => {});
    },
    drawMapLayer() {
      //循环添加marker标点
      if (this.tableData.length > 0) {
        this.mapInstance.setCenter([
          this.tableData?.[0]?.lng || 120.84,
          this.tableData?.[0]?.lat || 31.63,
        ]);
        this.tableData.forEach((v) => {
          this.addMapInstanceMarker(v);
        });
      }
    },
    // 添加自定义点标记
    addMapInstanceMarker(data) {
      let icon = "";
      if (data.changeLevel == "1" || data.changeLevel == "2") {
        icon = require("@/assets/images/security-app/gis_icon_1.png");
      }
      if (data.changeLevel == "3" || data.changeLevel == "4") {
        icon = require("@/assets/images/security-app/gis_icon_2.png");
      }
      if (data.lng && data.lat) {
        this.marker = new AMap.Marker({
          position: new AMap.LngLat(data.lng, data.lat),
          icon,
          offset: new AMap.Pixel(-36, -72),
        });
        this.mapInstance.add(this.marker);
        this.marker.on("click", (e) => {
          this.openInfo(e, data);
        });
      }
    },
    // 打开信息窗体
    openInfo(e, data) {
      let infoWindow = new AMap.InfoWindow({
        content: `
        <div class="infoWindow-layout">
            <div class="info-title">危险源信息</div>
            <div class="info-content">
                 <div class="item">
                    <div class="label">危险源名称：</div>
                    <div class="value">${data.changeName || "--"}</div>
                 </div>
                 <div class="item">
                    <div class="label">过程（区域）：</div>
                    <div class="value">${data.position || "--"}</div>
                 </div>
            </div>
        </div>
        `,
        offset: new AMap.Pixel(0, -72),
      });
      infoWindow.open(this.mapInstance, [data.lng, data.lat]);
    },
  },
  destroyed() {
    this.mapInstance && this.mapInstance.destroy();
  },
};
</script>

<style lang="less" scoped>
.risk-source-layout {
  height: 100%;
  padding-top: 10px;
  .flex();
  flex-direction: column;
  overflow: hidden;
  position: relative;
  /deep/.amap-info-content {
    width: 300px;
    .infoWindow-layout {
      width: 100%;
      .info-title {
        font-size: 18px;
        font-weight: bold;
        color: #263759;
        margin-top: 10px;
      }
      .item {
        margin-top: 6px;
        .flex();
        .label {
          width: 100px;
          color: #8a9295;
          flex-shrink: 0;
          text-align-last: justify;
        }
        .value {
          flex: 1;
          color: var(--primary-color);
        }
      }
    }
  }
  #map-container {
    height: 100%;
    width: 100%;
    border: 2px solid #fff;
    border-radius: 4px;
  }
  .table-container {
    width: 600px;
    background: rgba(255, 255, 255, 0.8);
    border-top: 3px solid var(--primary-color);
    box-shadow: 0px 0px 16px 0px rgba(150, 160, 172, 0.2);
    border-radius: 4px;
    padding: 15px 15px 0px 15px;
    position: absolute;
    top: 38px;
    bottom: 28px;
    right: 20px;
    z-index: 9;
    .flex();
    flex-direction: column;
    .main {
      height: 100%;
      flex: 1;
    }
    .pager-container {
      flex-shrink: 0;
      background-color: #fff;
    }
  }
}
</style>
